<template>
  <div>
    <el-form :model="form" ref="form">
      <el-table
        :data="form.specifications"
        border
        style="width: 100%"
      >
        <el-table-column prop="name" label="规格名称">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="barcode" label="条形码">
          <template slot-scope="scope">
            <el-input v-model="scope.row.barcode" placeholder="请输入"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="price" label="价格">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.price"
              placeholder="请输入"
              prefix-icon="el-icon-money"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="stock" label="库存">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stock" placeholder="0"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="weight" label="重量">
          <template slot-scope="scope">
            <el-input v-model="scope.row.weight" placeholder="请输入"></el-input>
            <el-select v-model="scope.row.weightUnit" class="auto-width-select" placeholder="单位">
              <el-option label="克(g)" value="g"></el-option>
              <el-option label="千克(kg)" value="kg"></el-option>
              <el-option label="毫升(ml)" value="ml"></el-option>
              <el-option label="升(L)" value="L"></el-option>
              <el-option label="磅(lb)" value="lb"></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="sku" label="店内码/货号">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sku" placeholder="请输入"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="danger" @click="removeRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="addRow">+ 添加规格</el-button>
    </el-form>
  </div>
</template>
<script>
export default {
   prop: {
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {
      form: {
        specifications: [
          {
            name: '',
            barcode: '',
            price: '',
            stock: 0,
            weight: '',
            weightUnit: 'g',
            sku: '',
          },
        ],
      },
    };
  },
  methods: {
    addRow() {
      this.form.specifications.push({
        name: '',
        barcode: '',
        price: '',
        stock: 0,
        weight: '',
        weightUnit: 'g',
        sku: '',
      });
    },
    removeRow(index) {
      this.form.specifications.splice(index, 1);
    },
  },
};
</script>
<style scoped>
.el-table .el-input {
  width: 100%;
}
.auto-width-select {
  min-width: 40px; /* 设置最小宽度 */
  width: auto; /* 自动根据内容调整宽度 */
  display: inline-block; /* 使宽度能够根据内容自动变化 */
}
</style>
